<template>
  <div>
	  <div id="nav">
	  	 <div class="top">
			 <ul>
			 	<li><router-link to="/"><img src="../assets/logo.png" ></router-link></li>
			 	<li><router-link to="/">首页</router-link></li>
			 	  		<li class="dingzhi">定制
			 	  		<div class="customized">
							<router-link to="/about" class="help">帮我定制</router-link>
							<router-link to="/self-help" class="help">自助定制</router-link>
							</div>
			 	  		</li>
			 	  <li class="linggan">灵感
				  <div class="customized">
				  	<router-link to="/journey" class="help">行程</router-link>
				  	<router-link to="/quchu" class="help">去处</router-link>
				  	</div>
				  </li>
			 </ul>
			 
			 <input type="text" placeholder="搜索 国家或城市">
			 
			 <div>
				 <router-link to="/register">注册</router-link>/
				 <router-link to="/login">登录</router-link>
			 </div>
		 </div>
	    
	    
	  </div>
  </div>
</template>

<script>
export default {
  name: 'Nav',
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped = "scoped">
	#nav{
		font-size: 20px;
		color: #ffffff;
		background-color: #2D3A40;
	}
	.top{
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	ul{
		list-style: none;
		width: 500px;
		height: 80px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	li{
		display: inline-block;
		position: relative;
		width: 100px;
padding: 40px 0;
		text-align: center;
	}
	ul>li{
		/* font-weight: 800; */
	}
/* 	li>div{
		position: absolute;
		left: 0;
	} */
	.help{
		display: block;
		top: 10px;
		left: 0;
		font-weight: 100;
		color: #000000;
		padding: 10px 5px;
		/* background-color: aquamarine; */
	}
	.help:first-child{
		border-bottom: 1px solid #999999;
	}
	.customized{
		z-index: 10;
		display: none;
		position: absolute;
		left: -25px;
		top: 93px;
		width: 160px;
		padding: 0 5px;
		background-color: #FFFFFF;
		
	}
	.dingzhi:hover .customized,
	.linggan:hover .customized{
		display: block;
		
	}
	a{
		color: #FFFFFF;
		text-decoration:none;
	}
	input{
		width: 280px;
		height: 50px;
		border: none;
		font-size: 18px;
		border-radius: 5px;
		text-indent: 1rem;
		color: #cccccc;
		background-color: #424E53;
	}
</style>
